<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/ztree/css/metroStyle/metroStyle.css" type="text/css">
    <style type="text/css">
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            width: 600px;
            height: 450px;
            overflow-y: scroll;
            overflow-x: auto;
        }

        div.zTreeDemoBackground {
            width: 600px;
            height: 450px;
            text-align: left;
        }

        span.search_highlight {
            color: whitesmoke;
            background-color: darkred;
        }
    </style>
    <!-- 引入jquery  -->
    <script type="text/javascript" src="../static/jquery-3.3.1.min.js"></script>
    <!-- 引入ztree插件 -->
    <script type="text/javascript" src="../static/ztree/js/jquery.ztree.all.js"></script>
    <!-- 引入ztree插件扩展功能 -->
    <script type="text/javascript" src="../static/ztree/js/jquery.ztree.exhide.min.js"></script>
    <!-- 引入自定义方法 -->
    <script type="text/javascript" src="../static/ztree/js/fuzzysearch.js"></script>
</head>

<body>
    <div style="width: 600px">
        <input id="keyword" type="search" placeHolder="搜索关键字" />
    </div>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="book" class="ztree"></ul>
        </div>
    </div>
    <br />
    <div><small>*参照亚马逊中文网图书板块的结构创建了模拟数据</small></div>
    <script type="text/javascript">

        //此高亮用于整个节点
        /* function setHighlight(treeId, treeNode) {
            return (treeNode.highlight) ? {"font-weight":"bold", "background-color": "#ddd"} : {"font-weight":"normal", "background-color": "transparent"};
        } */

        //ztree配置
        var setting = {
            check: {
                enable: true//checkbox
            },
            view: {
                // 使用ztree自定义高亮时，一定要设置fontCss,setHighlight是自定义高亮方法
                //fontCss: setHighlight,
                nameIsHTML: true, //允许name支持html                
                selectedMulti: false
            },
            edit: {
                enable: false,
                editNameSelectAll: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        $(document).ready(function () {
            //从服务器读取数据并初始化树形图
            //loadDataFromServer(urlStr);  
            //本例直接从模拟数据dataset.js读取
            loadDataFromLocal();//从本地dataset.js文件读取模拟数据并初始化树形图
        });

        /**
         * 通过ajax方法从服务器获取数据并初始化树形图
         */
        function loadDataFromServer(urlStr) {
            $.ajax({
                type: "get",
                dataType: "json",
                url: urlStr,  //服务请求地址 
                success: function (data) {
                    initThisZtree(data);//传入数据,初始化ztree
                    fuzzySearch('book', '#keyword', null, true); //初始化模糊搜索方法
                }
            });
        }

        /**
         * 从本地js/dataset.js文件读取模拟数据并初始化树形图
         */
        function loadDataFromLocal() {
            //此处的树节点数据mockData是在本地js/dataSet.js中预先定义的模拟数据
            var mockData = [{
                "name": "图书",
                "pId": "",
                "id": "0"
            }, {
                "name": "其他1",
                "pId": "",
                "id": "1"
            }, {
                "name": "其他2",
                "pId": "",
                "id": "2"
            }, {
                "name": "其他3",
                "pId": "",
                "id": "3"
            },
            {
                "name": "测试js正则元字符:[]\\^$.|?*+()",
                "pId": "0",
                "id": "06"
            }, {
                "name": "测试其他字符:{}<>'\"~`!@#%&-;:/,",
                "pId": "0",
                "id": "07"
            }, {
                "name": "测试大小写同节点: 大写ABDEFGHINQRT,小写abdefghinqrt",
                "pId": "0",
                "id": "08"
            }, {
                "name": "测试大写ABDEFGHINQRT",
                "pId": "0",
                "id": "09"
            }, {
                "name": "测试小写abdefghinqrt",
                "pId": "0",
                "id": "10"
            }, {
                "name": "文学",
                "pId": "0",
                "id": "00"
            }, {
                "name": "历史",
                "pId": "0",
                "id": "01"
            }, {
                "name": "法律",
                "pId": "0",
                "id": "02"
            }, {
                "name": "辞典与工具书",
                "pId": "0",
                "id": "03"
            }, {
                "name": "科学与自然",
                "pId": "0",
                "id": "04"
            }, {
                "name": "自然科学总论",
                "pId": "04",
                "id": "040"
            }, {
                "name": "数学",
                "pId": "04",
                "id": "041"
            }, {
                "name": "物理",
                "pId": "04",
                "id": "042"
            }, {
                "name": "天文学 地球科学",
                "pId": "04",
                "id": "043"
            }, {
                "name": "计算机与互联网",
                "pId": "0",
                "id": "05"
            }, {
                "name": "编程与开发",
                "pId": "05",
                "id": "050"
            }, {
                "name": "编程语言与工具",
                "pId": "050",
                "id": "0500"
            }, {
                "name": "C & C++",
                "pId": "0500",
                "id": "05000"
            }, {
                "name": "JAVA",
                "pId": "0500",
                "id": "05001"
            }, {
                "name": "Python",
                "pId": "0500",
                "id": "05002"
            }, {
                "name": "Python编程 从入门到实践",
                "pId": "05002",
                "id": "050020"
            }, {
                "name": "Python编程快速上手 让繁琐工作自动化",
                "pId": "05002",
                "id": "050021"
            }, {
                "name": "算法与数据结构",
                "pId": "050",
                "id": "0501"
            }, {
                "name": "编译原理和编译器",
                "pId": "050",
                "id": "0502"
            }, {
                "name": "操作系统",
                "pId": "05",
                "id": "051"
            }, {
                "name": "数据库",
                "pId": "05",
                "id": "052"
            }, {
                "name": "计算机科学理论",
                "pId": "05",
                "id": "053"
            }, {
                "name": "云计算与大数据",
                "pId": "05",
                "id": "054"
            }]
            initThisZtree(mockData);//传入数据,初始化ztree
            // zTreeId ztree对象的id,不需要#
            // searchField 输入框选择器
            // isHighLight 是否高亮,默认高亮,传入false禁用
            // isExpand 是否展开,默认合拢,传入true展开
            fuzzySearch('book', '#keyword', null, true); //初始化模糊搜索方法
        }

        /**
         * 初始化ztree
         * 
         * @param {Object} data
         */
        function initThisZtree(data) {
            //初始化ztree三个参数分别是(jQuery对象,ztree设置,树节点数据)
            var treeObj = $.fn.zTree.init($("#book"), setting, data);
            treeObj.expandAll(true);
        }
    </script>
</body>

</html>